<template>
	<view class="SubordinateList">
		<view class="flex jus-b ali-c" style="padding: 20rpx;" v-for="item in list">
			<view class="flex ali-c">
				<image :src="item.wxPhotoURL" mode="cover"
					style="border-radius: 50%;height: 100rpx;min-width: 100rpx;width: 100rpx;" />
				<view class="ml-20 flex-1 one" style="margin-left: 20rpx;">
					{{ item.wxName }}
				</view>
			</view>
			<view style="min-width: 300rpx;">{{ getTime(item.createtime) }}</view>
		</view>
		<view style="text-align: center;padding-top: 40%;color: gray;" v-if="!list.length">暂无下级</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1
			};
		},
		onLoad() {
			this.getinfo()
		},
		onReachBottom() {
			this.getinfo()
		},
		methods: {
			getTime(time) {
				let date = new Date(time * 1000)
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				// 时分秒
				let hour = date.getHours()
				let minute = date.getMinutes()
				let second = date.getSeconds()
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`
			},
			//商品详情
			async getinfo() {
				try {
					uni.showLoading({
						title: '加载中',
						mask: true
					})
					await this.$http({
						url: '/api/Course/parent',
						data: {
							page: this.page,
							offset: 20,
						}
					}).then(res => {
						this.list = [...this.list, ...res.data]
					})
					this.page++
				} catch (err) {

				} finally {
					uni.hideLoading()
				}
			},
		},
	}
</script>

<style lang="scss">
	table {
		width: 100%;
		border-collapse: collapse;
	}

	.one {
		overflow: hidden;
		/* 2.用省略号来代替超出文本 */
		text-overflow: ellipsis;
		/* 3.设置盒子属性为-webkit-box  必须的 */
		display: -webkit-box;
		/* 4.-webkit-line-clamp 设置为2，表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号 */
		-webkit-line-clamp: 1;
		/* 5.字面意思：单词破坏：破坏英文单词的整体性，在英文单词还没有在一行完全展示时就换行  即一个单词可能会被分成两行展示 */
		word-break: break-all;
		/* 6.盒子实现多行显示的必要条件，文字是垂直展示，即文字是多行展示的情况下使用 */
		-webkit-box-orient: vertical;
	}
</style>